<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
#sport{
    position:relative;
    width:500px;
    height:400px;
    border:1px solid #ddd;
}
#staff{
    position:absolute;
    z-index:3;
    bottom:10px;
    left:10px;
    overflow:hidden;
    width:180px;
    height:8px;
    border-radius:3px;
    background:#ddd;
    line-height:20;
	animation:staff 3s infinite;
}
#ball{
    position:absolute;
    z-index:3;
    bottom:20px;
    left:90px;
    overflow:hidden;
    width:30px;
    height:30px;
    border-radius:15px;
    box-shadow:0 0 10px rgba(204,102,0,.8);
    background:#F6D66E;
    /* background:linear-gradient(top,#fff,#F6D66E); */
    line-height:20;
	animation:ball 3s infinite;
}
@keyframes ball{
	0%{transform:translate(0,0);}
	5%{transform:translate(-90px,-100px);}
	18%{transform:translate(0,-350px);}
	35%{transform:translate(200px,0);}
	46%{transform:translate(380px,-160px);}
	60%{transform:translate(250px,-350px);}
	78%{transform:translate(60px,0);}
	100%{transform:translate(0,0);}
}
@keyframes staff{
	0%{transform:translate(0,0);}
	6%{transform:translate(260px,0);}
	20%{transform:translate(300px,0);}
	30%{transform:translate(300px,0);}
	40%{transform:translate(200px,0);}
	65%{transform:translate(40px,0);}
	79%{transform:translate(0,0);}
	100%{transform:translate(0,0);}
}
.reflect{
    width:950px;
    margin:0 auto;
    -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 0%,rgba(255,255,255,.3));
    font:bold 100px/1.231 georgia,sans-serif;
    text-transform:uppercase;
}
</style>
</head>
<body>
<div id="sport">
	<span id="ball">弹球</span>
	<span id="staff">滑杆</span>
</div>
<div class="reflect">你看到倒影了么？</div>
</body>
</html>
